<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>图书预约</span>
    </div>
    <!-- 表格 -->
    <div class="table_list">
      <el-table :data="tableData" style="width: 100%" :max-height="$store.state.tableHeight">
        <el-table-column type="index" label="序号" width="150"></el-table-column>
        <el-table-column prop="bookid" label="编号" width="150"></el-table-column>
        <el-table-column prop="bookname" label="名称" width="180"></el-table-column>
        <el-table-column prop="classify" label="分类"></el-table-column>
        <el-table-column prop="author" label="作者"></el-table-column>
        <el-table-column prop="press" label="出版社"></el-table-column>
        <el-table-column prop="bookshelf" label="书架"></el-table-column>
        <el-table-column label="操作" align="center" width="100">
          <template v-slot="scope">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="reserveBtnFn(scope.row)">借阅</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 预约框 -->
    <el-dialog title="借阅信息" :visible.sync="reserveDialogVisible" :before-close="handleClose" @closed="onCloseFn">
      <!-- 借阅信息展示 -->
      <el-descriptions>
        <el-descriptions-item label="书名">
          {{ reserveForm.bookname }}
        </el-descriptions-item>
        <el-descriptions-item label="分类">
          {{ reserveForm.classify }}
        </el-descriptions-item>
        <el-descriptions-item label="作者">
          {{ reserveForm.author }}
        </el-descriptions-item>
        <el-descriptions-item label="出版社">
          {{ reserveForm.press }}
        </el-descriptions-item>
      </el-descriptions>

      <el-form :model="reserveForm" ref="listFormRef">
        <el-form-item label="归还日期" label-width="100px" prop="returntime">
          <el-date-picker v-model="reserveForm.returntime" type="datetime" placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reserveDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="reserveSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <Pagination :total="total" @pagination="handlePageChange" />
  </el-card>
</template>

<script>
import Pagination from "@/components/Pagination.vue";
import { getBookListAPI, addBorrowAPI } from "@/api";
import { Dayjs } from "dayjs";
import { customAlphabet } from "nanoid";
export default {
  components: {
    Pagination,
  },
  data() {
    return {
      // 分页
      total: 0,
      pagenum: 1,
      pagesize: 9,
      reserveDialogVisible: false,
      tableData: [],
      reserveForm: {
        returntime: "",
      },
      rules: {
        bookname: [
          { required: true, message: "请输入图书名称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        classify: [
          { required: true, message: "请选择图书分类", trigger: "change" },
        ],
        author: [
          { required: true, message: "请输入图书作者", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        press: [
          { required: true, message: "请输入图书出版社", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        bookshelf: [
          { required: true, message: "请选择图书分类", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    // 分页
    handlePageChange(obj) {
      this.pagenum = obj.pagenum;
      this.pagesize = obj.pagesize;
      this.getList();
    },
    async getList() {
      const res = await getBookListAPI(this.pagenum, this.pagesize);
      this.tableData = res.data.data;
      this.total = res.data.total;
      console.log(this.tableData);
    },
    // 预约框
    reserveBtnFn(obj) {
      console.log(obj);
      this.reserveDialogVisible = true;
      //   this.reserveForm.bookid = obj.bookid;
      //   this.reserveForm.bookname = obj.bookname;
      //   this.reserveForm.author = obj.author;
      this.reserveForm = obj;
      // console.log(this.reserveForm);
    },
    // 提交预约
    reserveSubmit() {
      const username = this.$store.state.username;
      const phone = this.$store.state.phone;
      const { bookid, bookname, classify, bookshelf, returntime } = {
        ...this.reserveForm,
      };
      const dataFrom = {
        userid: this.$store.state.userid,
        bookid,
        // username,
        // phone,
        // bookname,
        // classify,
        // bookshelf,
        returntime,
        lendtime: this.$formatDate(Date()),
      };
      console.log(dataFrom);
      addBorrowAPI(dataFrom).then((res) => {
        console.log(res);
        if (res.data.status === 0) {
          this.$message.success("借阅成功");
        } else {
          this.$message.error("借阅失败");
        }
        this.reserveDialogVisible = false;
      });
    },
    // 对话框关闭
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => { });
    },
    onCloseFn() {
      this.$refs.listFormRef.resetFields();
    },
  },
  mounted() {
    this.getList();
    const nanoid = customAlphabet('1234567890', 6)
    console.log(nanoid());
  },
};
</script>

<style scoped></style>
